<template>
  <!-- 添加备注 -->
  <el-dialog
    :title="title"
    v-model="dialogVisible"
    width="480px"
    :close-on-click-modal="false"
    :before-close="handleChange"
  >
    <div>
      <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="textarea"></el-input>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleChange">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
@Options({
  props: {
    id: {
      // 订单ID
      type: String,
      default: "",
    },
    isVisible: {
      type: Boolean,
      default: false,
    },
    remark: {
      // 原始备注信息
      type: String,
      default: "",
    },
  },
  emits: ["update:isVisible", "callBack"],
})
export default class goodsInfo extends Vue {
  [x: string]: any;
  data() {
    return {
      dialogVisible: this.isVisible,
      title: "添加备注",
      textarea: this.remark,
    };
  }

  created() {
    if (this.remark) {
      this.title = "修改备注";
    }
  }

  // 确定
  submit() {
    if (this.textarea) {
      let nd = {
        id: this.id,
        remarks: this.textarea,
      };
      this.API.postOrder(nd).then(() => {
        this.$emit("callBack");
        this.handleChange();
      });
    }
  }

  handleChange() {
    this.dialogVisible = this.dialogVisible ? false : true;
    this.$emit("update:isVisible", this.dialogVisible);
  }
}
</script>

<style lang="scss" scoped>
</style>